<template>
  <div class="mianshow">
    <div class="toast" v-show="showtoast">
      <div @click="showtoastbtn" class="turnoff"></div>
      <div class="toceter">
        <canvas
          id="myCanvas"
          width="1080"
          height="1900"
          style="display:none;border: 2px solid grey;"
          class="cavas"
        ></canvas>
        <div id="qrcode" style="display:none"></div>
        <img class="recurit-jpg" alt />
        <div class="bottomtext">
          <span class="haibaotext"></span> 长按海报保存到手机
        </div>
      </div>
    </div>
    <div :class="{ tabs: seckilltab == 0, tabs1: seckilltab == 1 }">
      <!-- <p @click="seckilltab = 0">本周秒杀</p>
      <p @click="seckilltab = 1">下周秒杀</p>-->
      <p @click="clicktab(0)">本周秒杀</p>
      <p @click="clicktab(1)">下周秒杀</p>
    </div>
    <div class="box">
      <!-- <img @click="toposter(list)" class="item" :src="imgBaseUrl+newlist.seckillPoster" /> -->
      <div
        @click="toposter(list)"
        class="itembox"
        :style="{
          backgroundImage: 'url(' + imgBaseUrl + newlist.seckillPoster + ')'
        }"
      ></div>
      <img
        @click="showImage(require('../../assets/images/seckill/rule.jpg'))"
        class="item"
        src="@/assets/images/seckill/small.jpg"
      />
      <img
        v-for="(item, index) in list"
        :key="index"
        class="item"
        :src="imgBaseUrl + item.product.poster"
        @click="toshow(item)"
      />
    </div>
    <div class="ppp">长按图片保存到手机或发送</div>
    <div class="bottm_content">
      <van-tabs v-model="active" title-active-color="#1c4237" color="#1c4237">
        <van-tab title="推荐文案1">
          <div class="actle">{{ newlist.seckillShareTitle1 }}</div>
        </van-tab>
        <van-tab title="推荐文案2">
          <div class="actle">{{ newlist.seckillShareTitle2 }}</div>
        </van-tab>
        <van-tab title="推荐文案3">
          <div class="actle">{{ newlist.seckillShareTitle3 }}</div>
        </van-tab>
        <div class="divbtn">
          <button
            class="bttn"
            v-clipboard:copy="
              active == 0
                ? newlist.seckillShareTitle1
                : active == 1
                ? newlist.seckillShareTitle2
                : newlist.seckillShareTitle3
            "
            v-clipboard:success="onCopy"
            v-clipboard:error="onError"
          >
            复制方案
          </button>
        </div>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import Clipboard from 'clipboard';
import QRCode from 'qrcodejs2';
import { imgBaseUrl, baseUrl } from '@/config/env.js';
import { ImagePreview, Tab, Tabs, Toast } from 'vant';
export default {
  // inject: ['reload'],
  data() {
    return {
      Clipboard,
      active: 0,
      showtoast: false,
      imgBaseUrl,
      seckilltab: 0,
      list: [],
      newlist: [],
      nickName: '',
      password: ''
    };
  },
  created() {
    this.getinfo();
    this.getlist();
  },
  methods: {
    // 获取用户加密信息
    getpassword() {
      this.$http.post('/seckill/getFromUser').then(res => {
        console.log(res);
        if (res.data.code === '0') {
          this.password = res.data.object;
        }
      });
    },
    // 判断是否是客户经理
    getinfo() {
      this.$http.post('/tuser/userInfo', {}).then(res => {
        if (res) {
          if (res.data.code === '0') {
            this.nickName = res.data.object.nickName;
            if (res.data.object.isAuth !== '1') {
            } else {
              this.getpassword();
            }
          }
        }
      });
    },
    onCopy() {
      Toast('复制成功');
    },
    onError() {
      Toast('复制失败');
      this.productData();
    },
    showtoastbtn() {
      this.showtoast = false;
      document.getElementById('qrcode').innerHTML = '';
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.beginPath();
      // this.reload();
      // this.$router.push('/managerAd');
      // const img = document.getElementsByTagName('img')[1];
      // img.onload = function() {
      // document.getElementsByTagName(
      //   'img'
      // )[1].src = require('../../assets/images/seckill/white.jpg');
      // };
      // const canvas = document.getElementById('myCanvas');
      // const context = canvas.getContext('2d');
      // context.clearRect(0, 0, canvas.width, canvas.height);
      // // document.getElementsByTagName('img')[1].src = 'http://localhost:93/';
      // console.log(document.getElementsByTagName('img')[1].src);
    },
    getlist() {
      this.$http
        .post('/seckill/list', {
          type: this.seckilltab === 0 ? '1' : '2'
        })
        .then(res => {
          console.log(res);
          this.list = res.data.object[0].seckillList;
          this.newlist = res.data.object[0];
        });
    },
    showImage(img) {
      console.log(img);
      ImagePreview({
        images: [img],
        asyncClose: 0
      });
    },
    toshow(data) {
      this.showtoast = true;
      console.log(data);
      this.qrcode(
        baseUrl +
          '/entrance/goto?redir=' +
          encodeURIComponent(
            'seckillDetail?id=' + data.id + '&password=' + this.password
          ),
        data.product
      );
    },
    toposter() {
      this.showtoast = true;
      this.qrcode1(
        baseUrl +
          '/entrance/goto?redir=' +
          encodeURIComponent('seckillmodel?password=' + this.password)
      );
    },
    clicktab(type) {
      this.seckilltab = type;
      this.getlist();
    },
    qrcode(content, data) {
      console.log(data);
      // eslint-disable-next-line
      const qrcode = new QRCode('qrcode', {
        width: 75,
        height: 75, // 高度
        text: content // 二维码内容
        // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        // background: '#f0f'
        // foreground: '#ff0'
      });
      const canvas = document.getElementById('myCanvas');
      const context = canvas.getContext('2d');
      const that = this;
      var img = new Image();
      img.src = require('../../assets/images/seckill/white.jpg');
      // img.src = that.imgBaseUrl + that.images[0];
      img.onload = function() {
        context.drawImage(this, 0, 0, 1080, 1900);
        context.font = '55px Arial';
        context.fillStyle = 'black';
        context.shadowBlur = 0;
        context.fillText('积分“邮”好礼，每周抢惊喜', 230, 130);
        context.fillStyle = '#999999';
        context.fillText(that.nickName, 550, 250);
        context.fillStyle = '#ff91a8';
        context.moveTo(500, 1340);
        context.lineTo(830, 1340);
        context.lineTo(830, 1390);
        context.lineTo(500, 1390);
        context.lineTo(500, 1340);
        context.strokeStyle = '#ffffff';
        // 描边的直线并没有闭合成一个封闭的形状
        context.stroke();
        context.fill();
        context.fillStyle = '#1c4237';
        context.moveTo(90, 1200);
        context.lineTo(90, 1550);
        context.lineTo(990, 1550);
        context.lineTo(990, 1200);
        context.lineTo(90, 1200);
        context.strokeStyle = '#919191';
        context.lineWidth = 0.8;
        context.stroke();
        context.fill();
        context.fillStyle = 'white';
        context.font = '35px Arial';
        context.fillText('超值秒杀日秒杀价', 525, 1376);
        context.fillStyle = 'white';
        context.font = '40px Arial';
        context.fillText(data.title, 130, 1300);
        context.fillStyle = '#white';
        context.font = '35px Arial';
        // context.fillText(data.realSubTitle, 130, 1370);
        // context.fillStyle = '#9c9da1';
        // context.font = '35px Arial';
        // context.fillText(data.oPrice + '元', 500, 1340);
        context.fillStyle = '#ffd19b';
        context.font = '45px Arial';
        context.fillText(
          data.coin + '积分' + '+' + data.price + '元',
          130,
          1380
        );
        context.fillText(
          data.vipCoin + '积分' + '+' + data.price + '元',
          130,
          1460
        );
        // context.moveTo(500, 1330);
        // context.lineTo(600, 1330);
        // context.stroke();
        context.fillStyle = '#919191';
        context.font = '35px Arial';
        context.fillText('长按识别二维码', 350, 1660);
        context.fillText('直达购买！', 350, 1730);
        context.fillText('本商品由银商旅行580提供', 350, 1840);
        const img2 = new Image();
        img2.src = document.getElementsByTagName('img')[0].src;
        img2.onload = () => {
          context.drawImage(img2, 90, 1630, 220, 220);
          document.getElementsByTagName('img')[1].src = canvas.toDataURL(
            'image/png',
            1
          );
          that.loading = false;
        };
      };
      setTimeout(() => {
        const img3 = new Image();
        img3.setAttribute('crossOrigin', 'anonymous');
        img3.src = that.imgBaseUrl + data.poster;
        img3.setAttribute('crossOrigin', 'anonymous');
        img3.onload = () => {
          context.drawImage(img3, 90, 300, 900, 900);
          const img4 = new Image();
          img4.src = require('../../assets/images/seckill/zbtb.png');
          img4.onload = () => {
            context.drawImage(img4, 500, 1430, 100, 31);
            document.getElementsByTagName('img')[1].src = canvas.toDataURL(
              'image/png',
              1
            );
          };
          that.loading = false;
        };
      }, 200);
    },
    qrcode1(content) {
      // eslint-disable-next-line
      const qrcode = new QRCode('qrcode', {
        width: 75,
        height: 75, // 高度
        text: content // 二维码内容
        // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        // background: '#f0f'
        // foreground: '#ff0'
      });
      const canvas = document.getElementById('myCanvas');
      const context = canvas.getContext('2d');
      const that = this;
      var img = new Image();
      img.setAttribute('crossOrigin', 'anonymous');
      img.src = that.imgBaseUrl + that.newlist.seckillPoster;
      img.setAttribute('crossOrigin', 'anonymous');
      // img.src = that.imgBaseUrl + that.images[0];
      img.onload = function() {
        context.drawImage(this, 0, 0, 1080, 1800);
        context.font = '45px Arial';
        context.fillStyle = 'black';
        // context.fillText('扫描上方二维码', 525, 1438);
        context.shadowBlur = 0;
        const img2 = new Image();
        img2.src = document.getElementsByTagName('img')[0].src;
        img2.onload = () => {
          context.drawImage(img2, 430, 1200, 220, 220);
          document.getElementsByTagName('img')[1].src = canvas.toDataURL(
            'image/png',
            1
          );
          console.log('img2', img2);
          that.loading = false;
        };
      };
    }
  },
  components: {
    'van-tabs': Tabs,
    'van-tab': Tab
  }
};
</script>
<style lang="scss" scope>
.mianshow {
  padding-bottom: 50px;
}
.divbtn {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  .bttn {
    width: 230px;
    height: 70px;
    background-color: #1c4237;
    border-radius: 8px;
    font-size: 30px;
    color: #ffffff;
    text-align: center;
    line-height: 70px;
    border: 0;
  }
}

.actle {
  min-height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26px;
  padding: 10px;
}
.bottm_content {
  margin: 0 auto;
  width: 690px;
  min-height: 401px;
  background-color: #ffffff;
  box-shadow: 0px 3px 19px 0px rgba(0, 0, 0, 0.35);
  border-radius: 15px;
  padding-bottom: 20px;
}
.ppp {
  font-size: 26px;
  color: #1c4237;
  font-weight: bold;
  margin: 20px auto;
  text-align: center;
}
.toast {
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  .toceter {
    width: 571px;
    height: 984px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .bottomtext {
      text-align: center;
      font-size: 30px;
      z-index: 300;
      color: #ffffff;
      margin-top: 30px;
      .haibaotext {
        display: inline-block;
        width: 45px;
        height: 45px;
        background-image: url(../../assets/images/seckill/click.png);
        background-size: 100%;
        background-repeat: no-repeat;
      }
    }
  }
  .turnoff {
    width: 55px;
    height: 55px;
    background-image: url(../../assets/images/seckill/turnoff.png);
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: 50px;
    right: 30px;
  }
}
.box {
  display: flex;
  flex-wrap: wrap;
  margin-top: 15px;
  .item {
    width: 230px;
    height: 230px;
    margin-left: 15px;
    margin-top: 15px;
  }
  .itembox {
    width: 230px;
    height: 230px;
    margin-left: 15px;
    margin-top: 15px;
    background-size: cover;
    background-repeat: no-repeat;
  }
}
.tabs {
  width: 700px;
  height: 62px;
  background-image: url(../../assets/images/seckill/nowweek.png);
  background-size: 100%;
  background-repeat: no-repeat;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 30px;
  p {
    width: 50%;
    height: 100%;
    text-align: center;
    line-height: 62px;
  }
}
.tabs1 {
  width: 700px;
  height: 62px;
  background-image: url(../../assets/images/seckill/nextweek.png);
  background-size: 100%;
  background-repeat: no-repeat;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 30px;
  p {
    width: 50%;
    height: 100%;
    text-align: center;
    line-height: 62px;
  }
}
</style>
